<template>
  <div class="screen-container" >
    <header class="screen-header">
<!--      <div>-->
<!--        <img src="src/assets/logo.png" alt="">-->
<!--      </div>-->
<!--      <span class="logo">-->
<!--        <img src="https://gitee.com/yang_tao_code/picgo-image/raw/master/20210417175852.png"  alt="" />-->
<!--      </span>-->
<!--      <span id="yuqing_title" class="title">{{yuqing_tittle}}</span>-->
      <div class="title-right">
<!--        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme">-->
<!--        <span id="test_time" class="datetime">2049-01-01 00:00:00</span>-->
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" >
          <!--  今日敏感舆情（3条） -->
          <today_yuqing_page></today_yuqing_page>
          <div class="resize">
          </div>
        </div>
        <div id="left-bottom">
          <!--  七日热点舆情 -->
          <seven_hot_yuqing_page></seven_hot_yuqing_page>
          <div class="resize">
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top">
          <!-- 舆情地图 -->
          <mapPage></mapPage>
        </div>
        <div id="middle-bottom">
          <!-- 七日趋势分析 -->
          <seven_yuqing_fenxi></seven_yuqing_fenxi>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top">
          <!-- 今日舆情属性 -->
          <today_yuqing_shuxing></today_yuqing_shuxing>
        </div>
        <div id="right-bottom">
          <!-- 今日数据来源 -->
          <today_yuqing_source></today_yuqing_source>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import mapPage from "./views/yuqing_map";
import today_yuqing_page from "./views/today_yuqing_page";
import seven_hot_yuqing_page from "./views/seven_hot_yuqing_page";
import seven_yuqing_fenxi from "./components/seven_yuqing_fenxi";
import today_yuqing_source from "./components/today_yuqing_source";
import today_yuqing_shuxing from "./components/today_yuqing_shuxing";

export default {
  created () {
    // 注册接收到数据的回调函数
    // this.$socket.registerCallBack('fullScreen', this.recvData)
    // this.$socket.registerCallBack('themeChange', this.recvThemeChange)
    // 让标题字体大小自适应
    // document.getElementById('yuqing_title').sright-toptyle.fontSize =arg.currentTarget.innerWidth/100*1.4+"px";
    window.onresize=function(arg){
      document.getElementById('yuqing_title').style.fontSize =arg.currentTarget.innerWidth/100*1.4+"px";
      document.getElementById('test_time').style.fontSize =document.body.clientWidth/100*1+"px";
      // console.log(arg.currentTarget.innerWidth)
    }
  },
  destroyed () {
    // this.$socket.unRegisterCallBack('fullScreen')
    // this.$socket.unRegisterCallBack('themeChange')
  },
  mounted() {
    document.getElementById('yuqing_title').style.fontSize =document.body.clientWidth/100*1.4+"px";
    document.getElementById('test_time').style.fontSize =document.body.clientWidth/100*1+"px";
    // console.log("html",document.body.clientWidth)
  },
  data () {
    return {
      yuqing_tittle:"新疆舆情实时监控系统",
      // 定义每一个图表的全屏状态
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false
      }
    }
  },
  methods: {
    changeSize (chartName) {
      // 1.改变fullScreenStatus的数据
      // this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName]
      // 2.需要调用每一个图表组件的screenAdapter的方法
      // this.$refs[chartName].screenAdapter()
      // this.$nextTick(() => {
      //   this.$refs[chartName].screenAdapter()
      // })
      // 将数据发送给服务端
      const targetValue = !this.fullScreenStatus[chartName]
      // this.$socket.send({
      //   action: 'fullScreen',
      //   socketType: 'fullScreen',
      //   chartName: chartName,
      //   value: targetValue
      // })
    },
    // 接收到全屏数据之后的处理
    recvData (data) {
      // 取出是哪一个图表需要进行切换
      const chartName = data.chartName
      // 取出, 切换成什么状态
      const targetValue = data.value
      this.fullScreenStatus[chartName] = targetValue
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter()
      })
    },
    handleChangeTheme () {
      // 修改VueX中数据
      // this.$store.commit('changeTheme')
      // this.$socket.send({
      //   action: 'themeChange',
      //   socketType: 'themeChange',
      //   chartName: '',
      //   value: ''
      // })
    },
    recvThemeChange () {
      // this.$store.commit('changeTheme')
    }
  },
  components: {
    mapPage,
    today_yuqing_page,
    seven_hot_yuqing_page,
    seven_yuqing_fenxi,
    today_yuqing_source,
    today_yuqing_shuxing
  },
  computed: {

  }
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed!important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 6%;
  font-size: 20px;
  position: relative;
  > div {
      img {
        width: 100%;
      }
    }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position:absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    //position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-40%);
    img {
      height: 80%;
      width: 10%;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

section > div{
  //border: 1px solid red;
}
</style>
